<template>
    <div class="editor-surfaces" ref="scroller" :class="{ open: (open || show) && selectSurfaceName }">
        <table>
            <thead>
                <tr>
                    <th v-for="surface in surfaces" :key="surface.surface_name" :class="getSurfacesClassName(surface)" @click="setActiveSurfaces(surface)" @mouseenter="onMouseenter(surface, 'title')" @mouseleave="onMouseleave(surface, 'title')">
                        <strong v-text="getSurfacesName(surface)"></strong>
                        <em>
                            <CommonCurrencyRate :price="getSurfacesPrice(surface)" type="pre|icon|price" :other="{pre:'+'}" v-if="getSurfacesPrice(surface) > 0" />
                            <i v-else v-text="getSurfacesPrice(surface)"></i>
                        </em>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td :colspan="surfaces.length">
                        <cite v-for="surface in surfaces" v-show="surface.mapping.length > 1" @mouseenter="onMouseenter(surface, 'subtitle')" @mouseleave="onMouseleave(surface, 'subtitle')" :key="surface.surface_name" :class="{active:(open || show) && surface.surface_name == selectSurfaceName}">
                            <a v-for="mapper in surface.mapping" :key="mapper.canvas_name" :class="getMapperClassName(mapper)" @click="setActiveMapper(mapper)">
                                <small :name="getMapperName(mapper)"></small>
                                <em>
                                    <CommonCurrencyRate :price="getMapperPrice(mapper)" type="pre|icon|price" :other="{pre:'+'}" v-if="getMapperPrice(mapper) > 0" />
                                    <i v-else v-text="getMapperPrice(mapper)"></i>
                                </em>
                            </a>
                        </cite>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data () {
        return {
            show: true,
            open: null, // 打开
        };
    },
    props: {
        surfaces: { type: Array, default: () => [] },
        pieces: { type: Array, default: () => [] },
        activeSurface: { type: Object, default: null },
        activePiece: { type: Object, default: null },

    },
    computed: {
        // 当前显示区
        activeMapper () {
            if (this.activeSurface && this.activePiece) {
                const piece = this.activePiece;
                const surface = this.activeSurface;
                const mapperIndex = surface.mapping.findIndex(mapper => mapper.canvas_name == piece.canvas_name);
                const mapperActive = surface.mapping[mapperIndex];
                return mapperActive;
            } else {
                return null;
            }
        },

        // 点击打开的
        selectSurfaceName () {
            return (this.open || this.activeSurface || {}).surface_name;
        },

        // 当前选中的设计面名称
        activeSurfaceName () {
            return (this.activeSurface || {}).surface_name || "";
        },
        // 价格
        pricesPiece () {
            const result = []
            this.pieces.map(piece => {
                if (piece.layers.length > 0) {
                    const length = result.length;
                    if (length == 0) {
                        result.push({ canvas_name: piece.canvas_name, price: 0 })
                    } else {
                        result.push({ canvas_name: piece.canvas_name, price: piece.price })
                    }
                }
            });
            return result;
        },
    },

    watch: {
        activePiece (newval, oldval) {
            if (!oldval) {
                // 没有值的时候，表示初始化
                this.open = this.surfaces.filter(item => item.mapping.indexOf(this.activeMapper) >= 0)[0];
            }
        },
    },
    methods: {
        // 选中线框图
        setActiveSurfaces (surface) {
            if (surface.mapping.indexOf(this.activeMapper) >= 0) {
                // 当前已经选中
                this.open = surface;
            } else {
                // 先中已经有图层的设计区
                const priceObject = Object.fromEntries(this.pricesPiece.map((i) => [i.canvas_name, i]));
                const useds = surface.mapping.findIndex(m => priceObject[m.canvas_name]);
                const mapper = surface.mapping[Math.max(0, useds)];

                if (surface.mapping.length > 1) {
                    // 有多个内容时，只是打开
                    if (this.activeSurfaceName == surface.surface_name) {
                        // 当前的，不切换
                        this.open = surface;
                    } else {
                        this.setActiveMapper(mapper);
                    }
                } else {
                    this.setActiveMapper(mapper);
                }
            }

            // 滚动到中间
            let warper = this.$refs.scroller;
            let index = this.surfaces.indexOf(surface);
            let select = (warper.querySelectorAll("th") || [])[
                Math.max(0, index)
            ];

            if (select) {
                let scrollLeft = warper.scrollLeft;
                let warperWidth = warper.offsetWidth;
                let toLeft =
                    select.offsetLeft +
                    0.5 * select.offsetWidth -
                    0.5 * warperWidth;
                warper.scrollLeft = Math.max(toLeft, 0);
            }
        },

        // 选中设计区
        setActiveMapper (mapper) {
            const index = this.pieces.findIndex(piece => piece.canvas_name == mapper.canvas_name);
            const piece = this.pieces[index]

            if (!piece) {
                // 没有这个设计面
            } else {
                this.$emit('dispatch:setActivePiece', piece)
            }
        },

        // 是否被使用了
        getSurfacesClassName (surface) {
            const result = [];
            const priceObject = Object.fromEntries(this.pricesPiece.map((i) => [i.canvas_name, i]));
            const useds = surface.mapping.findIndex(m => priceObject[m.canvas_name]);
            surface.surface_name == this.selectSurfaceName && result.push('active');
            useds >= 0 && result.push('used')
            return result;
        },

        // 线框图名称
        getSurfacesName (surface) {
            let names = {
                "Front Side": "Front",
                "Back Side": "Back",
                "Sleeve Left": "Left Sleeve",
                "Sleeve Right": "Right Sleeve",
                "Long Sleeve Left": "Sleeve Left",
                "Long Sleeve Right": "Sleeve Right",
                "Neck Label Inner": "Inside Neck Label",
            };

            return names[surface.surface_name] || surface.surface_name;
        },

        // 获取线框图的价格
        getSurfacesPrice (surface) {
            const priceObject = Object.fromEntries(this.pricesPiece.map((i) => [i.canvas_name, i]));
            const price = surface.mapping.reduce((pre, cur) => pre + ((priceObject[cur.canvas_name] || {}).price || 0), 0)

            if (price) {
                return price
            } else {
                return "";
            }
        },

        // 设计区类名
        getMapperClassName (mapper) {
            const result = [];
            const priceObject = Object.fromEntries(this.pricesPiece.map((i) => [i.canvas_name, i]));

            this.activePiece && this.activePiece.canvas_name == mapper.canvas_name && result.push('active');
            priceObject[mapper.canvas_name] && result.push('used');

            return result;
        },

        // 设计区价格
        getMapperPrice (mapper) {
            const priceObject = Object.fromEntries(this.pricesPiece.map((i) => [i.canvas_name, i]));
            const priceActive = priceObject[mapper.canvas_name]

            if (!priceActive) {
                return "";
            } else if (priceActive.price) {
                return priceActive.price
            } else {
                return "free";

            }
        },
        // 设计区名称
        getMapperName (mapper) {
            // let name = item.canvas_name.replace(/[\w\W]*\-\s*([\w\W]*)$/,"$1");
            let name = mapper.canvas_name || "";
            name = name.replace(/\s/g, "-").replace(/-+/g, "-");
            name = name.toLowerCase();
            return name;
        },

        // 其他位置点击事件
        onClick (event) {
            let target = event.target;
            let warp = target.closest(".editor-surfaces");
            if (warp && warp == this.$el) {
                // 不管
            } else {
                // this.setVisible(false);
                this.open = null;
                this.show = false;
            }
        },
        // 鼠标进入
        onMouseenter (surface) {
            if (surface.surface_name == this.activeSurfaceName) {
                this.show = true;
            }
        },
        // 鼠标离开事件
        onMouseleave (surface) {
            this.show = false;
        },
    },
    mounted () {
        if (this.activePiece) {
            const name = this.activePiece.canvas_name;
            this.open = this.surfaces.filter(s => s.mapping.findIndex(m => m.canvas_name == name) >= 0)[0];
        }
        window.addEventListener("click", this.onClick);
    },

    // 销毁
    beforeDestroy: function () {
        window.removeEventListener("click", this.eventListener);
    },
};
</script>
<style lang="scss" scoped>
.editor-surfaces {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    box-sizing: border-box;
    padding: 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    text-align: center;
    scrollbar-width: none;

    // &.open{
    // 	padding-bottom: 40px;
    // }

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

table {
    margin: 0 auto;
    border-collapse: collapse;
    position: relative;
    min-width: 300px;

    thead {
        th {
            position: relative;
            line-height: 32px;
            padding: 0 18px;
            font-size: 14px;
            font-family: Roboto;
            font-weight: normal;
            color: #000000;
            cursor: pointer;
            z-index: 1;
            &:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background: #fff;
                border: 1px solid #c6c6c6;
                border-left: none;
            }

            // &:after{
            // 	content: '';
            // 	position: absolute;
            // 	left: -0.5px;
            // 	width: 1px;
            // 	top: 0;
            // 	bottom: 0;
            // 	background-color: #C6C6C6;
            // }

            strong {
                position: relative;
            }
            em {
                position: relative;
            }

            &:first-child {
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                &::before {
                    border-left: 1px solid #c6c6c6;
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                }
            }
            &:last-child {
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                &::before {
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                }
            }

            &.used {
                color: #ea4c89;
            }

            &:hover {
                &::before {
                    background-color: #ffedf4;
                }
            }
            &.active {
                font-family: Roboto-Medium;
                color: #fff;
                &::before {
                    left: -1px;
                    background-color: #ea4c89;
                    border: none;
                }
                &:first-child::before {
                    left: 0px;
                }
            }
        }
    }

    tbody {
        td {
            box-sizing: border-box;
            white-space: normal;
            text-align: left;
            padding: 0;

            cite {
                display: flex;
                opacity: 0;
                padding: 0 4px;
                margin: 0 1px;
                visibility: hidden;
                background: #fff;
                border-radius: 0 0 6px 6px;
                transition: all 0.1s;
                box-shadow: 0 0 0 rgba(0, 0, 0, 0);
                position: relative;
                top: -4px;
            }

            a {
                cursor: pointer;
                white-space: nowrap;
                position: relative;
                padding: 0 9px 0;
                height: 0;
                transition: all 0.1s;
                overflow: hidden;
                &:before {
                    content: '';
                    position: absolute;
                    left: 100%;
                    top: 36px;
                    width: 1px;
                    margin-left: -0.5px;
                    height: 12px;
                    background: #dcdcdc;
                }
                &:last-child:before {
                    display: none;
                }

                em {
                    position: absolute;
                    left: 0;
                    top: -14px;
                    right: 0;
                    color: #ea4c89;
                    line-height: 14px;
                    font-size: 14px;

                    font-weight: normal;
                    text-align: center;
                    display: block;
                    opacity: 0;
                    transition: all 0.1s;
                }

                small {
                    display: block;
                    position: relative;
                    width: 60px;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    border-radius: 2px;
                    font-size: inherit;

                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        border: 2px solid transparent;
                        border-radius: 2px;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        width: 38px;
                        height: 44px;
                        background-image: url(https://img.podpartner.com/static/images-20230202/designer-pieces.png);
                        background-size: 672px 216px;
                        background-repeat: no-repeat;
                    }

                    &[name='front-side-middle']:after {
                        background-position: -5px -5px;
                    }
                    &[name='front-side-top']:after {
                        background-position: -53px -5px;
                    }
                    &[name='front-side-bottom']:after {
                        background-position: -101px -5px;
                    }
                    &[name='front-side-pocket']:after {
                        background-position: -149px -5px;
                    }
                    &[name='front-side-lower-left']:after {
                        background-position: -197px -5px;
                    }
                    &[name='front-side-lower-right']:after {
                        background-position: -245px -5px;
                    }
                    &[name='front-side-shoulder-left']:after {
                        background-position: -293px -5px;
                    }
                    &[name='front-side-shoulder-right']:after {
                        background-position: -341px -5px;
                    }
                    &[name='back-side-middle']:after {
                        background-position: -389px -5px;
                    }
                    &[name='back-side-top']:after {
                        background-position: -437px -5px;
                    }
                    &[name='back-side-bottom']:after {
                        background-position: -485px -5px;
                    }
                    &[name='back-side-neck-label-outer']:after {
                        background-position: -533px -5px;
                    }
                    &[name='back-side-lower-right']:after {
                        background-position: -581px -5px;
                    }
                    &[name='back-side-lower-left']:after {
                        background-position: -629px -5px;
                    }

                    &[name='front-side-right-leg-top']:after {
                        background-position: -5px -113px;
                    }
                    &[name='front-side-right-leg-center']:after {
                        background-position: -53px -113px;
                    }
                    &[name='front-side-right-leg-bottom']:after {
                        background-position: -101px -113px;
                    }
                    &[name='front-side-left-leg-top']:after {
                        background-position: -149px -113px;
                    }
                    &[name='front-side-left-leg-center']:after {
                        background-position: -197px -113px;
                    }
                    &[name='front-side-left-leg-bottom']:after {
                        background-position: -245px -113px;
                    }
                    &[name='back-side-left-leg-top']:after {
                        background-position: -293px -113px;
                    }
                    &[name='back-side-left-leg-center']:after {
                        background-position: -341px -113px;
                    }
                    &[name='back-side-left-leg-bottom']:after {
                        background-position: -389px -113px;
                    }
                    &[name='back-side-right-leg-top']:after {
                        background-position: -437px -113px;
                    }
                    &[name='back-side-right-leg-center']:after {
                        background-position: -485px -113px;
                    }
                    &[name='back-side-right-leg-bottom']:after {
                        background-position: -533px -113px;
                    }
                    &[name='back-side-left-pocket']:after {
                        background-position: -581px -113px;
                    }
                    &[name='back-side-right-pocket']:after {
                        background-position: -629px -113px;
                    }
                }

                &:hover {
                    em {
                        color: #ea4c89;
                    }
                    small::before {
                        background-color: #f0f0f0;
                    }
                }

                &.active {
                    color: #ea4c89;
                    small {
                        &::before {
                            background-color: #333333;
                        }

                        &[name='front-side-middle']::after {
                            background-position: -5px -59px;
                        }
                        &[name='front-side-top']::after {
                            background-position: -53px -59px;
                        }
                        &[name='front-side-bottom']::after {
                            background-position: -101px -59px;
                        }
                        &[name='front-side-pocket']::after {
                            background-position: -149px -59px;
                        }
                        &[name='front-side-lower-left']::after {
                            background-position: -197px -59px;
                        }
                        &[name='front-side-lower-right']::after {
                            background-position: -245px -59px;
                        }
                        &[name='front-side-shoulder-left']::after {
                            background-position: -293px -59px;
                        }
                        &[name='front-side-shoulder-right']::after {
                            background-position: -341px -59px;
                        }
                        &[name='back-side-middle']::after {
                            background-position: -389px -59px;
                        }
                        &[name='back-side-top']::after {
                            background-position: -437px -59px;
                        }
                        &[name='back-side-bottom']::after {
                            background-position: -485px -59px;
                        }
                        &[name='back-side-neck-label-outer']::after {
                            background-position: -533px -59px;
                        }
                        &[name='back-side-lower-right']::after {
                            background-position: -581px -59px;
                        }
                        &[name='back-side-lower-left']::after {
                            background-position: -629px -59px;
                        }

                        &[name='front-side-right-leg-top']:after {
                            background-position: -5px -167px;
                        }
                        &[name='front-side-right-leg-center']:after {
                            background-position: -53px -167px;
                        }
                        &[name='front-side-right-leg-bottom']:after {
                            background-position: -101px -167px;
                        }
                        &[name='front-side-left-leg-top']:after {
                            background-position: -149px -167px;
                        }
                        &[name='front-side-left-leg-center']:after {
                            background-position: -197px -167px;
                        }
                        &[name='front-side-left-leg-bottom']:after {
                            background-position: -245px -167px;
                        }
                        &[name='back-side-left-leg-top']:after {
                            background-position: -293px -167px;
                        }
                        &[name='back-side-left-leg-center']:after {
                            background-position: -341px -167px;
                        }
                        &[name='back-side-left-leg-bottom']:after {
                            background-position: -389px -167px;
                        }
                        &[name='back-side-right-leg-top']:after {
                            background-position: -437px -167px;
                        }
                        &[name='back-side-right-leg-center']:after {
                            background-position: -485px -167px;
                        }
                        &[name='back-side-right-leg-bottom']:after {
                            background-position: -533px -167px;
                        }
                        &[name='back-side-left-pocket']:after {
                            background-position: -581px -167px;
                        }
                        &[name='back-side-right-pocket']:after {
                            background-position: -629px -167px;
                        }
                    }
                }

                &.used small::before {
                    border: 2px solid #f6b2cd;
                }
                // &.active small {
                // background-color: #333333;
                // background: #333333;
                // }
            }

            & > cite.active {
                visibility: visible;
                opacity: 1;
                margin-bottom: 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
                a {
                    padding-top: 12px;
                    padding-bottom: 8px;
                    height: 60px;
                    overflow: visible;
                    &.used {
                        padding-bottom: 28px;
                    }
                    em {
                        top: 76px;
                        opacity: 1;
                    }
                }
            }
        }
    }
}
</style>
